<template>
  <div class="upload-content">
    <div class="file">
      <icon-file />
      <div class="name">{{ uploadValue.name }}</div>
    </div>

    <div class="action">
      <a class="pre-text" target="_blank" @click="filePreview(uploadValue.url, uploadValue.name)">预览</a>
    </div>
    <!-- 预览pdf -->
    <pdf-viewer
      :url="pdfViewInfo.url"
      :title="pdfViewInfo.title"
      v-model:visible="pdfViewInfo.show"
      @close="Object.assign(pdfViewInfo, { ...PDFDefaultAttr })"
    />
    <!-- 图片预览组件 -->
    <a-image-preview :src="uploadValue.url" v-model:visible="previewVisible" />
  </div>
</template>

<script setup lang="ts">
  import { onMounted, ref, reactive } from 'vue'
  import { getFileInfo } from '@/api/common/index.js'

  // pdf预览
  import { PDFDefaultAttr } from '@/components/pdf-viewer/const'
  const pdfViewInfo = reactive({ ...PDFDefaultAttr })

  const props = defineProps({
    previewItem: String,
  })

  // 图片预览
  const previewVisible = ref(false)
  // 文件预览
  const filePreview = (url,name) => {
    let fileName = name.split('.').pop().toLowerCase()
    // pdf预览
    // if (fileName == 'pdf') {
    //   Object.assign(pdfViewInfo, {
    //     url: url,
    //     title: name,
    //     show: true,
    //   })
    //   return
    // }
    // 图片预览
    if (['jpg', 'png'].includes(fileName)) {
      previewVisible.value = true
      return
    }

    window.open(url)
  }

  const uploadValue = ref({})
  onMounted(() => {
    const id = props.previewItem
    getFileInfo({ id: id }).then((res) => {
      const result = res.result
      uploadValue.value = {
        uid: result.fileIdStr,
        name: result.originalFileName,
        url: `${import.meta.env.VITE_BASE_PATH}/uploadFile/image/${result.fileIdStr}`,
      }
    })
  })
</script>

<style lang="less" scoped>
  .upload-content {
    width: 335px;
    height: 36px;
    margin: 10px 10px 0 0;
    background: #f7f8fa;
    border-radius: 2px 2px 2px 2px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 14px;
    .file {
      display: flex;
      align-items: center;
      .name {
        margin-left: 12px;
        width: 168px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
    .pre-text {
      color: #1890ff;
      cursor: pointer;
    }
    .del-text {
      color: #f53f3f;
      cursor: pointer;
    }
  }
</style>
